<template>
    <div class="excel-view">
      <h2 class="title">多级表头展示</h2>
  
      <el-table :data="mergedRows" border style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
        <!-- 一级表头 -->
        <el-table-column label="User">
          <el-table-column prop="user.id" label="id" />
          <el-table-column prop="user.name" label="name" />
          <el-table-column prop="user.age" label="age" />
          <el-table-column prop="user.email" label="email" />
        </el-table-column>
  
        <el-table-column label="Order">
          <el-table-column prop="order.id" label="id" />
          <el-table-column prop="order.userId" label="userId" />
          <el-table-column prop="order.amount" label="amount" />
          <el-table-column prop="order.status" label="status" />
        </el-table-column>
  
        <el-table-column label="Product">
          <el-table-column prop="product.id" label="id" />
          <el-table-column prop="product.name" label="name" />
          <el-table-column prop="product.price" label="price" />
          <el-table-column prop="product.stock" label="stock" />
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { computed } from "vue";
  
  const rawData = [
    { type: "user", id: 1, name: "Alice", age: 25, email: "alice@test.com" },
    { type: "user", id: 2, name: "Bob", age: 30, email: "bob@test.com" },
  
    { type: "order", id: 101, userId: 1, amount: 99.5, status: "paid" },
    { type: "order", id: 102, userId: 2, amount: 199.9, status: "pending" },
  
    { type: "product", id: "P1", name: "Laptop", price: 4999, stock: 10 },
    { type: "product", id: "P2", name: "Phone", price: 2999, stock: 50 }
  ];
  
  // 统一到一个表格行结构
  const mergedRows = computed(() => {
    return rawData.map(item => {
      if (item.type === "user") {
        return { user: item, order: {}, product: {} };
      } else if (item.type === "order") {
        return { user: {}, order: item, product: {} };
      } else {
        return { user: {}, order: {}, product: item };
      }
    });
  });
  
  const headerStyle = {
    backgroundColor: "#f5f7fa",
    color: "#333",
    fontWeight: "bold",
    border: "1px solid #dcdcdc",
    textAlign: "center"
  };
  
  const cellStyle = {
    border: "1px solid #dcdcdc",
    textAlign: "center"
  };
  </script>
  
  <style scoped>
  .excel-view {
    padding: 20px;
    background: #fff;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  </style>
  